<script>
import { grossSales, occupancyAnalysis, orderAnalysis } from '@/api/analysis'
import * as echarts from 'echarts'

export default {
  name: 'Index',
  data() {
    return {}
  },
  created() {
    this.onGetGrossSales()
    this.onGetOccupancyAnalysis()
    this.onGetOrderAnalysis()
  },
  mounted() {},
  methods: {
    // 每个房屋销售总额分析
    onGetGrossSales() {
      grossSales().then((res) => {
        console.log(res)
        echarts.init(this.$refs.grossSalesRef).setOption({
          title: {
            text: '房屋租赁金额分析',
            left: 'left'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: res.data.map((v) => v.title),
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '租赁金额',
              barWidth: '60%',
              data: res.data.map((v) => v.salesTotal / 100),
              type: 'bar'
            }
          ]
        })
      })
    },
    // 每个房屋入住分析
    onGetOccupancyAnalysis() {
      occupancyAnalysis().then((res) => {
        console.log(res)
        echarts.init(this.$refs.occupancyAnalysisRef).setOption({
          title: {
            text: '公寓入住分析',
            left: 'left'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: res.data.map((v) => v.title),
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '入住数',
              barWidth: '60%',
              data: res.data.map((v) => v.count),
              type: 'bar'
            }
          ]
        })
      })
    },
    // 订单统计分析
    onGetOrderAnalysis() {
      orderAnalysis().then((res) => {
        echarts.init(this.$refs.orderAnalysisRef).setOption({
          title: {
            text: '订单状态分析',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '人数',
              type: 'pie',
              radius: '50%',
              data: [
                { value: res.data.CHECK_IN, name: '入住中' },
                { value: res.data.OUT, name: '已退租' },
                { value: res.data.PAYED, name: '待审核' },
                { value: res.data.PRE_PAY, name: '待支付' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      })
    }
  }
}
</script>

<template>
  <div class="container">
    <div ref="orderAnalysisRef" class="e-b-box" />
    <div class="top">
      <div ref="grossSalesRef" class="grossSales e-box" />
      <div ref="occupancyAnalysisRef" class="occupancyAnalysis e-box" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  padding: 0 50px;
}
.e-box {
  width: 500px;
  height: 400px;
}
.top {
  display: flex;
  justify-content: space-around;
}
.e-b-box {
  width: 1000px;
  height: 500px;
  margin: 20px auto;
}
</style>
